<template>
    <div class="home">
        <div ref="p" style=" height: 100%;" @click="change">
            <el-collapse-transition style="height: 100%">
                <div style="height: 100%" v-show="show3">
                    <div class="transition-box">el-collapse-transition</div>

                </div>
            </el-collapse-transition>
        </div>
        <home  v-if="!show3"></home>
    </div>
</template>

<script>

    import Home from "./Home";
    export default {
        name: "Login",
        components: {Home},
        data() {
            return {
                show3: true
            }
        },
        methods: {
            change(){
                this.show3 = !this.show3
                // this.$refs.p.style.height='0'
            }

        }
    }
</script>

<style lang="scss" scoped>
    .home{
        height: 100%;
        /*background: beige;*/

        .transition-box {
            background-image: url("../assets/back.jpg");
            background-size: cover;
            width: 100%;
            height: 100%;
            border-radius: 4px;
            /*background-color: #409EFF;*/
            text-align: center;
            color: #fff;
            padding: 40px 20px;
            box-sizing: border-box;
            margin-right: 20px;
        }
    }

</style>
